<template>
  <div>
    <van-nav-bar title="购物车" />
    <div class="box">
      <!-- 一级分类 -->
      <van-tabs animated>
        <van-tab :key="index" v-for="(item, index) in fenlei" :title="item">
        </van-tab>
      </van-tabs>
    </div>
    <!-- 购物车商品 -->
    <div class="con">
      <van-empty v-show="flag ? 1 : 0" description="购物车空空如也~" />
      <van-swipe-cell v-for="(item, index) in cartArr" :key="index">
        <van-checkbox
          v-model="item.ischeck"
          shape="square"
          checked-color="#ff6041"
        ></van-checkbox>

        <van-card
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$imgHost + item.img"
        >
          <template #bottom>
            <div>
              <van-stepper
                min="1"
                @plus="add(item.id)"
                @minus="jianshao(item.id, --item.num)"
                v-model="item.num"
              />
            </div>
          </template>
        </van-card>

        <template #right>
          <div class="xuanze">
            <van-button
              @click="delcart(item.id)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </div>
        </template>
      </van-swipe-cell>
    </div>

    <!-- 提交订单 -->
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
      <van-checkbox
        v-model="allCheck"
        shape="square"
        checked-color="#ff6041"
        @click="allxuanze"
        >全选</van-checkbox
      >
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  getCurUserId,
  cartList,
  cartEdit,
  cartDelete,
  checktoken,
} from "../../request/api.js";
export default {
  data() {
    return {
      flag: 0,
      fenlei: ["全部", "降价", "常买", "分类"],
      allCheck: false,
      cartArr: [],
    };
  },
  methods: {
    delcart(id) {
      cartDelete({ id })
        .then((d) => {
          if (d.data.list != null) {
            this.$toast({
              message: "删除成功",
              forbidClick: true,
              loadingType: "spinner",
            });
            let uid = getCurUserId("/curt");
            cartList({ uid })
              .then((d) => {
                this.cartArr = d.data.list ? d.data.list : [];
                if(d.data.list == null){
                  this.flag =1
                }
              })
              .catch((e) => {
                console.log(e, 33333);
              });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    allxuanze() {
      // console.log(this.allCheck);
      this.cartArr.forEach((d) => {
        d.ischeck = this.allCheck;
      });
    },
    //增加
    add(id) {
      let obj = {
        id,
        type: "2",
      };
      cartEdit(obj)
        .then((d) => {
          // console.log(d);
        })
        .catch((e) => {
          // console.log(e);
        });
    },
    //减少
    jianshao(id, n) {
      if (n == 1) {
        this.$toast({
          message: "宝贝不能再少啦",
        });
      }
      let obj = {
        id,
        type: "1",
      };
      cartEdit(obj)
        .then((d) => {
          // console.log(d);
        })
        .catch((e) => {
          // console.log(e);
        });
    },
    //提交订单
    onSubmit() {},
    //修改地址
    onClickEditAddress() {
      this.$router.push("/addredd");
    },
  },
  computed: {
    total() {
      let n = 0;
      let num = 0;
      for (const obj of this.cartArr) {
        if (obj.ischeck == true) {
          num += obj.num * obj.price;
          n++;
        }
      }
      if (n == this.cartArr.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
      return num * 100;
    },
  },
  mounted() {
    //验证token是否有效
    checktoken()
      .then((d) => {
        if (d.data.code != 200) {
          this.$toast({
            message: d.data.msg,
            icon: "warning-o",
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });
    checktoken()
      .then((d) => {
        if (d.data.code != 200) {
          this.$toast({
            message: d.data.msg,
            icon: "warning-o",
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });
    getCurUserId();
    let uid = getCurUserId("/curt");
    cartList({ uid })
      .then((d) => {
        console.log(d);
        if (d.data.list != null) {
          for (const obj of d.data.list) {
            obj.ischeck = false;
          }
          this.cartArr = d.data.list;
          // console.log(this.cartArr, 888888888);
        }else{
          this.flag =1
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style scoped>
.van-button--square {
  height: 100px;
}
.van-button--danger {
  background-color: #ff6345;
}
.con {
  height: 64vh;
  overflow: scroll;
}
.van-stepper {
  text-align: right;
}
.van-swipe-cell /deep/ .van-checkbox {
  position: absolute;
  left: 18px;
  top: 40px;
}
.van-card__header {
  width: 80vw;
  float: right;
}
.van-submit-bar {
  margin-bottom: 10vh;
}
::v-deep .van-nav-bar__content {
  position: fixed;
  background-color: #ff6041;
  top: 0;
  left: 0;
  width: 100vw;
}
::v-deep .van-nav-bar__title,
::v-deep .van-icon-arrow-left:before {
  color: white;
  font-weight: bold;
}
.top_cate {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 46px;
  padding-bottom: 20px;
  background-color: #ff6041;
}
.van-search {
  height: 40px;
  margin-left: 14px;
  width: 93vw;
  border-radius: 8px;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
::v-deep .van-nav-bar__title {
  color: white;
  font-weight: bold;
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  background-color: transparent;
}
.box {
  /* background-color: #ff6041; */
  background-image: linear-gradient(to bottom, #ff6345, #ff887d);
  margin-top: 46px;
}
.box img {
  width: 120px;
  margin-left: 27px;
  margin-right: 20px;
}
::v-deep .van-search {
  padding: 0;
  display: inline-block;
  border-radius: 10px;
}
::v-deep .van-search__content {
  border-radius: 5px;
  width: 150px;
}
::v-deep .van-tabs__nav--line {
  background-color: transparent;
}
::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #ff8917;
}
::v-deep .van-tab {
  color: white;
  font-weight: bold;
}
::v-deep .van-tabs__line {
  display: none;
}
</style>